<div class="clearfix">
  <div class="pull-left">
    <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-default btn-with-icon" (click)="refreshList.emit()">
        <i class="ion-refresh"></i>
        <span>刷新</span>
      </button>
      <div class="btn-group" dropdown [isDisabled]="!selectedCategories.length">
        <button type="button"
                class="btn btn-default  btn-with-icon dropdown-toggle"
                dropdownToggle>
          <i class="ion-ios-list"></i>
          <span>批量操作</span>
        </button>
        <ul class="dropdown-menu" *dropdownMenu>
          <li class="dropdown-item">
            <a [href]="" (click)="delCategories()">删除选中</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="table-responsive">
  <div class="category-list">
    <table class="table tablehover table-striped table-no-borders black-muted-bg table-enrich">
      <thead class="thead-inverse">
        <tr>
          <th class="batch-checkbox">
            <ba-checkbox [(ngModel)]="categoriesSelectAll" (ngModelChange)="batchSelectChange($event)">
              <span ba-checkbox-label>
                <span>&nbsp;</span>
                <strong>ID</strong>
              </span>
            </ba-checkbox>
          </th>
          <th width="20%">名称</th>
          <th width="30%">描述</th>
          <th>别名</th>
          <th>文章</th>
          <th width="30%" class="text-center">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngIf="!categories || !categories.data.length">
          <td colspan="7">
            <p class="text-muted text-center category-err-msg" *ngIf="categories && categories.data.length == 0">暂无数据<p>
            <p class="text-muted text-center category-err-msg" *ngIf="categories && categories.data.length == undefined">加载中<p>
          </td>
        </tr>
        <ng-template [ngIf]="categories && categories.data.length">
          <tr *ngFor="let category of categories.data">
            <td class="batch-checkbox">
              <ba-checkbox [(ngModel)]="category.selected" (ngModelChange)="itemSelectChange()">
                <span ba-checkbox-label>
                  <span>&nbsp;</span>
                  <strong>{{ category.id }}</strong>
                </span>
              </ba-checkbox>
            </td>
            <td>
              <strong *ngIf="category.unrepaired" class="text-warning">
                <i class="ion-alert"></i>
                <span>&nbsp;</span>
              </strong>
              <strong *ngIf="category.level">└</strong>
              <strong *ngFor="let num of categoryLevelMark(category.level)">─&nbsp;</strong>
              <strong>{{ category.name }}</strong>
            </td>
            <td class="category-description" title="{{ category.description }}">
              <span [class.text-muted]="!category.description">{{ category.description || '暂无' }}</span></td>
            <td>{{ category.slug }}</td>
            <td>{{ category.count || 0 }}</td>
            <td>
              <div class="text-center">
                <div class="btn-group" role="group" aria-label="Basic example">
                  <button type="button" class="btn btn-sm btn-warning" (click)="editCategory(category)">编辑分类</button>
                  <button type="button" class="btn btn-sm btn-danger"  (click)="delCategory(category)">删除分类</button>
                  <a class="btn btn-sm btn-success" href="//surmon.me/category/{{ category.slug }}" target="_blank">查看分类</a>
                </div>
              </div>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </table>
  </div>
</div>
